<template>
	<view class="container">
		
		<view class="dl_box">
			<view class="logo">
				
			</view>

			<view class="">
				<view class="input_name">
					手机号码
				</view>
				<view class="input">
					<input class="uni-input" 
					
					placeholder="请输入手机号" 
					type="number" 
					:value="mobile"
					@input="mobileInput"
					maxlength="11"
					data-key="mobile"
					/>
				</view>
				
			</view>

			<view class="">
				<view class="input_name">
					密码
				</view>
				<view class="input">

					<input class="uni-input" 
					style="background-color: transparent;"
					:password="showPassword"
					 type="mobile"
					 value="" 
					 placeholder="8-18位不含特殊字符的数字、字母组合"
					 maxlength="20"
					 data-key="pwd"
					 @input="pwdInput"
					 @confirm="login"/>
					<uni-icons v-show="pwd!=''" style="right: 30px;"  class="close" type="close" size="20"  @click=""></uni-icons>
					<uni-icons  class="look"  :type="showPassword ? 'eye' : 'eye-filled'" size="20"  @click="changePassword"></uni-icons>

				</view>
			</view>
			<view class="dl_button" @click="login"  :disabled="loading">
				登录
			</view>
			<view class="wnagjmm" @click="jump" data-src='./forget/forget'>
				忘记密码
			</view>
			<view class="wnagjmm" @click="jump" data-src='./login_code'>
				验证码登录
			</view>
		</view>
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				showPassword: true,
				width: 0,
				height: 0,
				mobile: '',
				pwd: '',
				systemInfo: {},
				loading: false,
				cid: '', // 消息推送模块参数
				denglu:'',
			};
		},
		onLoad: function() {
			uni.hideLoading()
		},
		onBackPress(options) {
			this.back();  
			return true;  
		}, 
		methods: {
			ok_look (e){
				console.log(e.detail.value[0]);
				this.denglu=e.detail.value[0]
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			back(){
				uni.reLaunch({
					url: '../home/home'
				});
			},
			mobileInput(e){
				this.mobile = e.target.value
			},
			pwdInput(e){
				this.pwd = e.target.value
			},
			jump(e) {
				
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			login(){
				this.loading = true
				if(this.mobile == ""){
					this.loading=false
					uni.showToast({
						title: '请输入手机号',
						icon:"none"
					});
				}else if(this.pwd == ""){
					this.loading = false
					uni.showToast({
						title: '请输入密码',
						icon:"none"
					});
				}else{
					console.log(this.cid)
					var data = {
							'mobile': this.mobile,
							'pwd': this.pwd,
							'cid': this.cid,
						}
						
					
						uni.request({
							url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=account.login&app=1',
							method: 'POST',
							data: data,
							header:{'Content-Type':'application/x-www-form-urlencoded'},
							success: res => {
								// console.log(JSON.stringify(res));return false;
								if(res.data.status == 0){
									uni.showToast({
										title: res.data.result.message,
										icon:"none"
									});
									this.loading = false
								}else{
									uni.setStorage({
										key: 'openid',
										data: res.data.result.openid,
										success: (res) => {},
										fail: () => {}
									})
									uni.setStorage({
										key: 'mid',
										data: res.data.result.mid,
										success: (res) => {},
										fail: () => {}
									})
									setTimeout(()=>{
										this.loading = false
										uni.reLaunch({
											url: '/pagesZA/media/media'
										});
									},500)
								}
							},
							fail: () => {},
							complete: () => {}
						});
					
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100vh;
		width: 100vw;
		background: url('/static/zn/code_login_bg.png') 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.container {
		height: 100%;
		width: 100%;
	

		
		box-sizing: border-box;
		padding: 130px 15px 52px;

	}

	.top_bar {
		color: #fff;
		display: flex;
		justify-content: space-around;

		.dl {
			font-size: 24px;
			font-weight: 700;
			border-bottom: 3px solid #fff;
		}

		.zc {
			font-size: 19px;
			padding-bottom: 3px;
		}
	}

	.dl_box {
		width: 100%;
		
	
		background-size: cover;
		padding: 31px 41px;
		display: flex;
		flex-direction: column;
		// align-items: center;
		.logo{
			width: 50%;
			height: 250rpx;
			background: url('/static/zn/logo.png')0 0 no-repeat;
			background-size: 100% 100%;
			margin: 0 auto;
		}
		.dl_top{
			color: #fff;
			    font-size: 26px;
			    margin-bottom: 15px;
				text-align: center;
			
		}
		.input_name{
			color: #fff;
		}
		.input{
			   
			display: flex;
			position: relative;
			background-color: transparent;
			border-bottom: 1px solid #8378A0;
			.uni-input{
				color: #fff;
			background-color: transparent;
			}
			.close,.look{
				position: absolute;
				right: 2px;
				top: 0;
				bottom: 0;
				margin:  auto;
			}

		}
	}
	
	.dl_box>view{
		// border: 1px solid red;
	}
	.dl_button{
		
		margin-top: 52px;
		height: 45px;
		background-color: #180185;
		border-radius: 15px;
		font-size: 20px;
		color: #fff;
		text-align: center;
		line-height: 45px;
	}
	.wnagjmm{
		margin: 20rpx 0;
		text-align: center;
		color:  #fff;
	}
	.ok_look{
		width: 100%;
		text-align: center;
	}
	.bottom{
		width:100%;
		color: #4481ff;
		text-align: center;
	}
</style>